<template>
    <view class="page">
        <view class="page-list">
            <view class="page-list-null" v-if="templateList.length==0">暂无业务模板~~</view>
            <view class="page-list-child" v-for="(item,index) in templateList" :key="index" @click.stop="chooseTemolate(item.id)">
                <view class="child-top">
                    {{item.phone}}
                </view>
                <view class="child-top">
                    {{item.content}}
                </view>
                <view class="child-bottom">
                    <button class="set" @click.stop="toSkipSetTempate(item.id)">编辑</button>
                    <button class="del" @click.stop="delBusinessSituationTemplate(item.id)">删除</button>
                </view>
            </view>
<!--            <view class="page-list-item" v-for="(item,index) in templateList" :key="index">-->
<!--                <view class="item-top" @click.stop="chooseTemolate(item.id)">-->
<!--                    <view class="title">-->
<!--                        <text>业务情况</text>-->
<!--                        <view class="right" v-if="setId!=index">-->
<!--                            <text @click.stop="toSetTemplate(index)">编辑</text>-->
<!--                            <text style="color: red" @click.stop="delBusinessSituationTemplate(item.id)">删除</text>-->
<!--                        </view>-->
<!--                        <view class="right" v-if="setId==index">-->
<!--                            <text @click.stop="setBusinessSituationTemplate(item.id)">保存</text>-->
<!--                            <text @click.stop="clearSet">取消</text>-->
<!--                        </view>-->
<!--                    </view>-->
<!--                    <view class="content" v-if="setId!=index">{{item.content}}</view>-->
<!--                    <view class="content" v-if="setId==index">-->
<!--                        <textarea @click.stop v-model="content" auto-height></textarea>-->
<!--                    </view>-->
<!--                    <view class="title" v-if="item.img_info.length>0||setId==index">成功案例/相关资质</view>-->
<!--                    <view class="imgList" v-if="item.img_info.length>0||setId==index">-->
<!--                        <view class="imgItem" v-for="(img,imgId) in item.img_info" :key="imgId" v-if="setId!=index">-->
<!--                            <img :src="img.img_url" mode="aspectFill" @click.stop="previewImages(item,imgId)"/>-->
<!--                        </view>-->
<!--                        <view class="imgItem" v-for="(img,imgId) in img_list" :key="imgId" v-if="setId==index">-->
<!--                            <img :src="img" mode="aspectFill" @click.stop="previewImage(img_list,imgId)"/>-->
<!--                            <img class="del-btn" :src="File_Url+'del-Image.png'" @click.stop="delImage(imgId)"/>-->
<!--                        </view>-->
<!--                        <img class="img-addbtn" :src="File_Url+'img-upload.png'" @click.stop="chooseImage" v-if="img_ids.length<9&&setId==index"/>-->
<!--                    </view>-->
<!--                </view>-->
<!--            </view>-->
        </view>
    </view>
</template>

<script>
    export default {
        name: "businessTemplate",
        data(){
            return{
                File_Url: this.$api.FILE_URL,
                templateList: [],
                page: 1,
                total: 0,
                limit: 10,
                setId: -1,
                content: '',
                img_ids: [],
                img_list: [],
            }
        },
        onLoad(){
        },
        onShow(){
            this.page = 1;
            this.getBusinessSituationTemplate();
        },
        //下拉刷新
        onPullDownRefresh(){
            this.page = 1;
            this.getBusinessSituationTemplate();
            setTimeout(function () {
                uni.stopPullDownRefresh();
            },2000)
        },
        //触底叠加
        onReachBottom(){
            if (this.total != this.templateList.length){
                this.page++;
                this.getBusinessSituationTemplate();
            }

        },
        methods:{
            chooseTemolate(id){
              getApp().globalData.template_id = id;
              uni.navigateBack({
                  delta: 1
              })
            },
            //获取模板列表
            async getBusinessSituationTemplate(){
                const res = await this.$api.getBusinessSituationTemplate({user_token: uni.getStorageSync('userToken')});
                if (res.data.level == 'success'){
                    if (this.page == 1){
                        this.templateList = res.data.data
                    }  else {
                        this.templateList = this.templateList.concat(res.data.data)
                    }
                    this.total = res.data.page_info.total;
                }
            },
            //编辑模板
            async setBusinessSituationTemplate(id){
                let params = {
                    user_token: uni.getStorageSync('userToken'),
                    content: this.content,
                    img_ids: this.img_ids,
                    id: id
                }
                const res = await this.$api.setBusinessSituationTemplate(params);
                if (res.data.level == 'success'){
                    uni.showToast({
                        icon:'success',
                        title: res.data.message,
                    });
                    this.setId = -1;
                    this.page = 1;
                    this.content = '';
                    this.img_ids = [];
                    this.img_list = [];
                    this.getBusinessSituationTemplate();
                }else {
                    uni.showToast({
                        icon:'none',
                        title: res.data.message,
                    });
                }
            },
            //删除模板
            async delBusinessSituationTemplate(id){
                const res = await this.$api.delBusinessSituationTemplate({user_token: uni.getStorageSync('userToken'),id: id});
                if (res.data.level == 'success'){
                    uni.showToast({
                        icon:'success',
                        title: res.data.message,
                    });
                    this.page = 1;
                    this.getBusinessSituationTemplate();
                }else {
                    uni.showToast({
                        icon:'none',
                        title: res.data.message,
                    });
                }
            },
            //开启编辑功能
            toSetTemplate(index){
                this.setId = index;
                this.content = this.templateList[index].content;
                this.templateList[index].img_info.forEach(item=>{
                    this.img_ids.push(item.img_id)
                    this.img_list.push(item.img_url)
                })
            },
            //选择图片
            chooseImage(){
                let count = 9 - this.img_ids.length;
                var _this = this;
                uni.chooseImage({
                    sizeType: ['original', 'compressed'],  //可选择原图或压缩后的图片
                    sourceType: ['album', 'camera'], //可选择性开放访问相册、相机
                    count: count,
                    success: res => {
                        for (let i=0; i< res.tempFilePaths.length; i++){
                            _this.upLoadImage(res.tempFilePaths[i]);
                        }
                    }
                })
            },
            //上传图片
            async upLoadImage(url){
                var _this = this;
                uni.showLoading({
                    title: '上传中'
                })
                uni.uploadFile({
                    url: _this.$api.BASE_URL+'file/upload-img',
                    filePath: url,
                    name: 'photo',
                    header: {
                        'content-type': 'application/json' // 默认值
                    },
                    success: function (res) {
                        res.data = JSON.parse(res.data);
                        if (res.data.level == 'success') {
                            _this.img_ids.push(res.data.data.id)
                            _this.img_list.push(res.data.data.img_url)
                        }else {
                            uni.showToast({
                                icon:'none',
                                title:res.data.message
                            })
                        }
                        uni.hideLoading();
                    }
                })
            },
            previewImages(item,index){
                let imgList = [];
                item.img_info.forEach(item => {
                    imgList.push(item.img_url)
                })
                this.previewImage(imgList,index);
            },
            //预览图片
            previewImage(item,index){
                uni.previewImage({
                    current:index,
                    urls: item
                })
            },
            //删除图片
            delImage(index){
                this.img_list.splice(index,1);
                this.img_ids.splice(index,1);
            },
            //取消
            clearSet(){
                this.setId = -1;
                this.content = '';
                this.img_ids = [];
                this.img_list = [];
            },
            //跳转编辑功能
            toSkipSetTempate(id){
                uni.navigateTo({
                    url: '/pages/details/needsDetail/needsApply/needsApply?template_id='+id
                })
            }
        }
    }
</script>

<style scoped lang="scss">
    @import '~@/static/scss/mixin.scss';
    .page{
        min-height: 100vh;
        background: #eeeeee;
        padding: 30rpx;
    }
    .page-list-null{
        padding: 30rpx;
        text-align: center;
        line-height: 100rpx;
        height: 100rpx;
        color: #333333;
        font-size: 28rpx;
    }
    .page-list-child{
        background: #fff;
        border-radius: 16rpx;
        overflow: hidden;
        width: 100%;
        margin-bottom: 30rpx;
        .child-top{
            width: calc(100% - 60rpx);
            padding: 30rpx 30rpx 0 30rpx;
            font-size: 32rpx;
            line-height: 50rpx;
            max-height: 250rpx;
            @include ellipsis(5)
        }
        .child-bottom{
            @include flex(flex-start);
            flex-direction: row;
            margin-top: 30rpx;
            button{
                width: 50%;
                padding: 0;
                margin: 0;
                height: 70rpx;
                line-height: 70rpx;
                text-align: center;
                border: none;
                border-radius: 0;
                font-size: 28rpx;
            }
            button:after{
                border: none;
            }
            .set{
                background: #007aff;
                color: #fff;
            }
            .del{
                color: red;
            }
        }
    }
    .page-list-item{
        background: #ffffff;
        width: 100vw;
        margin-bottom: 2rpx;
        padding-top: 30rpx;
        .item-top{
            width: 100%;
            .content{
                padding:30rpx;
                font-size: 28rpx;
                line-height: 28rpx;
            }
            .title{
                padding: 0 10rpx;
                font-size: 30rpx;
                line-height: 30rpx;
                height: 30rpx;
                font-weight: bold;
                border-left: 10rpx solid #3782FF;
                @include flex(flex-start);
                flex-direction: row;
                .right{
                    margin-left: auto;
                    color: #666666;
                    padding-right: 20rpx;
                    text{
                        padding-left:30rpx;
                    }
                }
            }
            .imgList{
                width: calc(100vw - 30rpx);
                padding: 15rpx;
                @include flexWrap(flex-start);
                flex-direction: row;
                .imgItem{
                    margin: 15rpx;
                    width: calc((100vw - 120rpx)/3);
                    height: calc((100vw - 120rpx)/3);
                    position: relative;
                    .del-btn{
                        width: 30rpx;
                        height: 30rpx;
                        position: absolute;
                        right: -15rpx;
                        top: -15rpx;
                        background: #FFFFFF;
                        border-radius: 360rpx;
                    }
                }
                .img-addbtn{
                    margin: 15rpx;
                    width: calc((100vw - 120rpx)/3);
                    height: calc((100vw - 120rpx)/3);
                }
            }
        }
    }
</style>